<template>
  <div class="questiondetails">
    <a-card :bordered="false" style="border-radius:8px;" :bodyStyle="{padding:'13px 26px 23px 22px'}">
      <div class="card_title">
        {{ rows.q }}
      </div>
      <div style="margin-top: 22px;transition: all 1s 1s linear;">
        <a-space>
          <a-avatar :src="rows.img" :size="25"/>
          <span>{{ rows.q_user }}</span>
          <span>{{ rows.view_num }} 浏览</span>
          <a-divider type="vertical"/>
          <span>{{ rows.q_time }}</span>
        </a-space>
        <div class="openbtn hvr-wobble-skew" @click="isshow = !isshow">我要回答
          <a-icon :type="isshow === true ? 'up':'down'"/>
        </div>
        <el-collapse-transition>
          <div v-if="isshow" style="margin-top: 38px;">
            <editor-bar v-model="content" :value="content" @change="getEditor" id="weditor"></editor-bar>
            <div class="linerbtn hvr-bounce-in" @click="doanswer">提交回答</div>
          </div>
        </el-collapse-transition>
      </div>
    </a-card>

    <a-card :bordered="false" style="border-radius:8px;margin-top: 20px" :bodyStyle="{padding:'13px 26px 23px 22px'}">
      <div v-if="list.length">
        <div class="card_title">
          推荐回答
        </div>
        <div class="lists" v-if="info.img!==null">
          <div class="flex col_center">
            <a-avatar :src="info.img" :size="40"/>
            <div style="margin-left: 7px;">
              <div>{{ info.a_user }}</div>
              <div>{{ info.a_time }} 回答</div>
            </div>
          </div>
          <div class="line-3" style="margin-top: 17px;margin-left: 47px;" v-html="info.a_data">
            <!--          {{ info.a_data }}-->
          </div>
          <div class="islike">
            <span style="cursor: pointer" @click="dochangelike(1,info.a_id)">
              <a-icon type="like" class="like hvr-pulse-shrink" style="font-size: 14px;"/>
              {{ info.a_like === 0 ? '抢首赞': info.a_like }}
            </span>
            <a-divider type="vertical"/>
            <span style="cursor: pointer" @click="dochangelike(2,info.a_id)">
              <a-icon
                style="transform:rotate(180deg);font-size: 14px;"
                class="unlike"
                type="like"/>
              {{ info.a_dislike }}
            </span>
          </div>
          <a-divider/>
        </div>
        <div class="card_title">
          其他回答
        </div>
        <div>
          <div class="lists" v-for="(v,k) in list" :key="k">
            <div class="flex col_center">
              <a-avatar :src="v.img" :size="40"/>
              <div style="margin-left: 7px;">
                <div>{{ v.a_user }}</div>
                <div>{{ v.a_time }} 回答</div>
              </div>
            </div>
            <div class="line-3" style="margin-top: 17px;margin-left: 47px;" v-html="v.a_data">
              <!--            {{ v.a_data }}-->
            </div>
            <div class="islike">
              <span style="cursor: pointer" @click="dochangelike(1,v.a_id)">
                <a-icon type="like" class="like hvr-pulse-shrink" style="font-size: 14px;"/>
                {{ v.a_like === 0 ? '抢首赞': v.a_like }}
              </span>
              <a-divider type="vertical"/>
              <span style="cursor: pointer" @click="dochangelike(2,v.a_id)">
                <a-icon style="transform:rotate(180deg);font-size: 14px;" class="unlike" type="like"/>
                {{ v.a_dislike }}
              </span>
            </div>
            <a-divider/>
          </div>
        </div>
      </div>
      <div v-else style="text-align: center;">
        <img :src="require('@/assets/imgs/noanswer.png')" alt="" style="width:237px;height:237px;margin:38px auto 7px;">
        <div style="color:#BABDC1;font-size: 14px;text-align: center;margin-bottom: 74px;">暂无回答</div>
      </div>
    </a-card>
  </div>
</template>
<script>
  import { doanswer, dochangelike, getanswerlistinfo } from '@/api/knowledgeApi'
  import EditorBar from '@/components/Editor/WangEditor'

  export default {
    name: 'Questiondetails',
    components: {
      EditorBar
    },
    data () {
      return {
        isshow: false,
        content: '',
        info: {
          a_id: 0,
          a_user: '',
          a_time: '',
          a_data: '',
          a_dislike: 0,
          a_like: 0,
          img: null
        },
        list: [
          // {
          //   a_id: 596, // 答案id
          //   a_user: '陈柯帆', // 回答用户
          //   a_time: '2020-10-09 15:51:24', // 时间
          //   a_data: '里的撒谎肯定会卡刷点卡ask觉得就卡手机卡的贺卡上肯定会卡就是很多客户爱看书的看哈萨克的贺卡上打开哈萨克很多库哈斯看到好看安徽省肯定会喀什快点回家喀什空间的贺卡上好看的话喀什的卡河水库的贺卡上看的贺卡上的看哈萨克好的卡双卡的好卡刷卡的哈萨克和的卡双卡的', // 答案
          //   a_dislike: 0, // 答案无用数
          //   a_like: 0, // 单案有用数
          //   img: 'http://img.haodanku.com/headimg_15775_1591955585.jpg', // 头像
          //   is_yes: 0, // 当前用户是否可评价此回答：当前用户已设置有用1 无用2  没设置 0
          //   status: 2 // 2 是否是当前登录用户回答 1=是 2否
          // }
        ]
      }
    },
    computed: {
      rows: function () {
        return this.$store.getters.rows
      }
    },
    destroyed () {
      this.$store.dispatch('setRowsname', '')
    },
    created () {
      console.log(this.rows)
      if (this.rows.id) {
        this.getanswerlistinfo(this.rows.id)
      }
    },
    mounted () {

    },
    methods: {
      doanswer () {
        doanswer({
          id: this.rows.id,
          content: this.content
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            this.$message.success('感谢您的回答!')
            this.getanswerlistinfo(this.rows.id)
            this.content = ''
            this.isshow = false
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getEditor (value) {
        console.log(value)
        this.content = value
      },
      dochangelike (status, id) {
        dochangelike({
          status: status,
          blog_id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            if (status === 1) {
              this.$message.success('已赞!')
            } else {
              this.$message.success('已踩!')
            }
            this.getanswerlistinfo(this.rows.id)
          } else {
            this.$message.error(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      getanswerlistinfo (id) {
        getanswerlistinfo({
          problem_id: id
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
            if (res.data.info !== null) {
              this.info = res.data.info
            }
            this.list = res.data.list
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>
<style lang='less' scoped>
  .questiondetails {
    max-width: 1047px;
    margin: 0 auto;
    /deep/ .w-e-text {
      img {
        width: 150px;
        height: 150px;
      }
    }

    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      font-weight: 600;
    }

    .openbtn {
      float: right;
      width: 100px;
      border: 1px solid rgba(57, 193, 91, 100);
      color: #39C15B;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
    }

    .islike {
      width: 122px;
      height: 33px;
      line-height: 33px;
      border-radius: 30px;
      border: 1px solid rgba(232, 233, 234, 100);
      color: #39C15B;
      text-align: center;
      float: right;
      margin-bottom: 15px;
      font-size: 13px;

      .like {
      }

      .unlike {
      }
    }

    .lists {
      margin-top: 17px;
    }

    .linerbtn {
      cursor: pointer;
      width: 100px;
      height: 37px;
      line-height: 37px;
      text-align: center;
      color: white;
      border-radius: 8px;
      background: linear-gradient(to right, #33CD77, #29CFB2);
      overflow: hidden;
      float: right;
      margin-top: 12px;
    }
  }
</style>
